<!DOCTYPE html>
<html lang="en">

<head>
    <title>Let's learn about disaster warning together.</title>
    <meta name="comp1800 template" content="My 1800 App">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Libraries -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"
        crossorigin="anonymous"></script>

    <!-- Other libraries go here -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-- Link to styles of your own -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>

    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>
    <!-- Stuff for body goes here -->
    <nav class="navbar navbar-expand-lg bg-info-subtle">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                    <path
                        d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z" />
                    <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
                </svg>
                Disaster warning
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="./Home.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./Weather forecast.html">Weather Forecast</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Scan</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./Map.html">Map</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./Loginindex.html">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container my-2">
        <div class="p-2 text-center bg-body-tertiary rounded-3">
            <!-- <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg> -->
            <img src="./images/img/Scan.png" class="img-fluid rounded">
            <h1 class="text-body-emphasis">Welcome to Disaster warning Website</h1>
            <p class="col-lg-8 mx-auto fs-5 text-muted">
                Let's learn about disaster warning together.
            </p>
            <!-- <div class="d-inline-flex gap-2 mb-5">
                <button class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill" type="button">
                    Call to action
                    <svg class="bi ms-2" width="24" height="24" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
                </button>
                <button class="btn btn-outline-secondary btn-lg px-4 rounded-pill" type="button">
                    Secondary link
                </button>
            </div> -->
        </div>
    </div>

    <div class="container my-2">
        <div class="card-group">
            <div class="card">
                <img src="./images/img/Scan1.jpg" class="card-img-top" alt="..." height="280">
                <div class="card-body">
                    <h5 class="card-title">Ground Monitoring Devices</h5>
                    <p class="card-text">
                        Various ground monitoring devices, such as water level sensors, rainfall sensors, and water
                        quality sensors, are installed in areas prone to floods. These sensors can monitor the changes
                        in water levels, the amount of rainfall, and relevant parameters of water quality in real time,
                        and transmit the data to the monitoring center. Through the analysis of these real-time data,
                        the occurrence of floods can be promptly warned, and the development trend of floods can be
                        understood.
                    </p>
                    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card">
                <img src="./images/img/Scan2.png" class="card-img-top" alt="..." height="280">
                <div class="card-body">
                    <h5 class="card-title">LiDAR (Light Detection and Ranging) Technology</h5>
                    <p class="card-text">
                        LiDAR obtains terrain information by emitting laser beams towards the ground and measuring the
                        time of the reflected light. In flood detection, LiDAR can be used to draw high-precision
                        topographic and geomorphic maps, thus accurately calculating the inundation depth and extent of
                        floods. In addition, it can also monitor the changes in the ground after the flood, providing
                        data support for disaster assessment and recovery and reconstruction.
                    </p>
                    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card">
                <img src="./images/img/Scan3.gif" class="card-img-top" alt="..." height="280">
                <div class="card-body">
                    <h5 class="card-title">Geographic Information System (GIS) Technology</h5>
                    <p class="card-text">
                        GIS can manage, analyze, and visually display various spatial data. In flood scanning and
                        detection, by integrating satellite remote sensing data, ground monitoring data, terrain data,
                        etc., with GIS, spatial analysis and simulation can be carried out.
                    </p>
                    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
            <p class="col-md-4 mb-0 text-body-secondary">&copy;  2025 Yan Jiachun</p>

            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
                viewBox="0 0 16 16">
                <path
                    d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
            </svg>

            <ul class="nav col-md-4 justify-content-end">
                <li class="nav-item"><a href="./Home.html" class="nav-link px-2 text-body-secondary">Home</a></li>
                <li class="nav-item"><a href="./Weather forecast.html" class="nav-link px-2 text-body-secondary">Weather Forecast</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Scan</a></li>
                <li class="nav-item"><a href="./Map.html" class="nav-link px-2 text-body-secondary">Map</a></li>
                <li class="nav-item"><a href="./Login.html" class="nav-link px-2 text-body-secondary">Login</a></li>
            </ul>
        </footer>
    </div>
    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/scan.js"></script>
    <!-- Link to scripts of your own -->
    <!-- <script src="./scripts/script.js"></script> -->

</body>

</html>